<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/common/jsp/adminHeader.jsp" flush="true"/>
<jsp:include page="/common/jsp/adminNav.jsp" flush="true"/>
<link rel="stylesheet" href="/common/css/01system.css" />

			<section id="subpage_outer_wrap">
				<div class="subpage_inner_wrap">

				<div class="subpage_contents_inner_wrap drop_shadow">
					<div class="item_block">
						<div class="tab_1_wrap">
							<ul class="tab1_layout">
								<li class="tab1_li"><a class="tab1_btn tab_btn_selected" href="#tab1">시스템 관리</a></li>
								<li class="tab1_li"><a class="tab1_btn" href="/admin/02site/01_01.jsp">사이트 관리</a></li>
								<li class="tab1_li"><a class="tab1_btn" href="/admin/03prod/01_01.jsp">상품관리</a></li>
								<li class="tab1_li"><a class="tab1_btn" href="/admin/04statistic/01_01.jsp">주문/정산/통계 관리</a></li>
								<li class="tab1_li"><a class="tab1_btn" href="/admin/05equip/01_01.jsp">장비/신청 관리</a></li>
							</ul>
						</div>
					</div>
					<div class="item_block">
						<div class="path_wrap">
							<img class="path_bullet_home" src="/images/adm_common/header_path_home.gif" alt=""/>
							시스템관리<img class="path_bullet_arrow" src="/images/adm_common/header_path_arrow.gif" alt=""/>
							사이트 방문자내역<img class="path_bullet_arrow" src="/images/adm_common/header_path_arrow.gif" alt=""/>
							유입경로별 방문자 통계
						</div>
					</div>
				</div>
				
					<div class="subpage_contents_wrap">
						<div class="subpage_contents_inner_wrap drop_shadow" style="height:580px; overflow:hidden;">
							<h1 class="h1_1">사이트 방문자내역</h1>
							<h2 class="h2_1">유입경로별 방문자 통계</h2>
							<div class="item_block">
								<div class="tab_1_wrap">
									<ul class="tab1_layout">
										<li class="tab1_li"><a class="tab1_btn tab_btn_selected" href="#tab1">연별통계</a></li>
										<li class="tab1_li"><a class="tab1_btn" href="#tab2">월별통계</a></li>
										<li class="tab1_li"><a class="tab1_btn" href="#tab3">일일통계</a></li>
										<li class="tab1_li"><a class="tab1_btn" href="#tab4">브라우저 통계</a></li>
										<li class="tab1_li"><a class="tab1_btn" href="#tab5">OS 통계</a></li>
									</ul>
								</div>
							</div>
							
							<div class="page_block page_body" id="page_block_0"><!-- 1. 연별 통계 -->
								<div class="chart_wrap">
									<div class="chart_inner_wrap">
										<canvas id="canvas1" class="chart_core"></canvas>
									</div>
								</div>							
							</div>
							
							<div class="page_block page_body" id="page_block_1" ><!-- 2. 월별 통계 -->
								<div class="chart_wrap">
									<div class="chart_inner_wrap">
										<canvas id="canvas2" class="chart_core"></canvas>
									</div>
								</div>
							</div>
							
							<div class="page_block page_body" id="page_block_2"><!-- 3. 일일 통계 -->
								<div class="chart_wrap">
									<div class="chart_inner_wrap">
										<canvas id="canvas3" class="chart_core"></canvas>
									</div>
								</div>
							</div>
							
							<div class="page_block page_body" id="page_block_3"><!-- 4. 브라우저 통계 -->
								<div class="chart_wrap">
									<div class="chart_inner_wrap">
										<canvas id="canvas4" class="chart_core"></canvas>
									</div>
								</div>
							</div>
							
							<div class="page_block page_body" id="page_block_4"><!-- 5. OS 통계 -->
								<div class="chart_wrap">
									<div class="chart_inner_wrap">
										<canvas id="canvas5" class="chart_core"></canvas>
									</div>
								</div>
							</div>
														
						</div>
					</div>
				</div>
			</section>
			<script>
				// Chart.js 공식홈페이지 : http://chartjs.org/
				// 1. 연별
				var ChartData1 = {
					labels : ["2010", "2011", "2012", "2013", "2014"],
					datasets : [{
						fillColor : "rgba(151,187,205,0.5)",
						strokeColor : "rgba(151,187,205,0.8)",
						highlightFill : "rgba(151,187,205,0.75)",
						highlightStroke : "rgba(151,187,205,1)",
						data : [10514, 15042, 97864, 99777, 108545]
					}]
				}
				// 2. 월별
				var ChartData2 = {
					labels : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
					datasets : [{
						fillColor : "rgba(151,187,205,0.5)",
						strokeColor : "rgba(151,187,205,0.8)",
						highlightFill : "rgba(151,187,205,0.75)",
						highlightStroke : "rgba(151,187,205,1)",
						data : [2500, 3110, 1200, 1100, 4100, 3000, 2050, 3000, 1900, 1600, 1000, 1500]
					}]
				}
				// 3. 일일 통계
				var ChartData3 = {
					labels : ["", "1일", "2일", "3일", "4일", "5일", "6일", "7일", "8일", "9일", "10일", "11일", "12일", "13일", "14일", "15일", "16일", "17일", "18일", "19일", "20일", "21일", "22일", "23일", "24일", "25일", "26일", "27일", "28일", "29일", "30일", "31일", ""],
					datasets : [{
							label: "Day",
							fillColor : "rgba(151,187,205,0.2)",
							strokeColor : "rgba(151,187,205,1)",
							pointColor : "rgba(151,187,205,1)",
							pointStrokeColor : "#fff",
							pointHighlightFill : "#fff",
							pointHighlightStroke : "rgba(151,187,205,1)",
							data : [0, 53, 82, 13, 37, 58, 76, 28, 31, 52, 23, 53, 82, 13, 37, 58, 76, 28, 31, 52, 23, 53, 82, 13, 37, 58, 76, 28, 31, 52, 23, 33, 0]
						}]
				}
				// 4. 브라우저 통계
				var ChartData4 = {
					labels : ["", "IE", "Chrome", "FireFox", "Opera", "Safari", ""],
					datasets : [{
							label: "Browser",
							fillColor : "rgba(151,187,205,0.2)",
							strokeColor : "rgba(151,187,205,1)",
							pointColor : "rgba(151,187,205,1)",
							pointStrokeColor : "#fff",
							pointHighlightFill : "#fff",
							pointHighlightStroke : "rgba(151,187,205,1)",
							data : [0, 53, 82, 13, 37, 58, 0]
						}]
				}
				// 5. OS 통계
				var ChartData5 = {
					labels : ["", "Window", "Mac", "Unix", "iOS", "Android", ""],
					datasets : [{
							label: "OS",
							fillColor : "rgba(151,187,205,0.2)",
							strokeColor : "rgba(151,187,205,1)",
							pointColor : "rgba(151,187,205,1)",
							pointStrokeColor : "#fff",
							pointHighlightFill : "#fff",
							pointHighlightStroke : "rgba(151,187,205,1)",
							data : [0, 153, 182, 113, 137, 158, 0]
						}]
				}
				window.onload = function(){
					var ctx1 = document.getElementById("canvas1").getContext("2d");
					window.myBar = new Chart(ctx1).Bar(ChartData1, {
						responsive					: true,
						animationEasing		: "easeInOutExpo",
						animationSteps			: 100,
						showTooltips				: true,
						tooltipEvents				: ["mousemove", "touchstart", "touchmove", "mouseout"],
						tooltipFontFamily		: "Dotum",
						scaleFontFamily			: "Dotum",
						scaleGridLineWidth	: 1,
						barValueSpacing		: 50
					});
					var ctx2 = document.getElementById("canvas2").getContext("2d");
					window.myBar = new Chart(ctx2).Bar(ChartData2, {
						responsive					: true,
						animationEasing		: "easeInOutExpo",
						animationSteps			: 100,
						showTooltips				: true,
						tooltipEvents				: ["mousemove", "touchstart", "touchmove", "mouseout"],
						tooltipFontFamily		: "Dotum",
						scaleFontFamily			: "Dotum",
						scaleGridLineWidth	: 1,
						barValueSpacing		: 50
					});
					var ctx3 = document.getElementById("canvas3").getContext("2d");
					window.myLine = new Chart(ctx3).Line(ChartData3, {
						responsive: true
					});
					var ctx4 = document.getElementById("canvas4").getContext("2d");
					window.myLine = new Chart(ctx4).Line(ChartData4, {
						responsive: true
					});
					var ctx5 = document.getElementById("canvas5").getContext("2d");
					window.myLine = new Chart(ctx5).Line(ChartData5, {
						responsive: true
					});
				}		
			</script>
			<script>
				// 탭 전환
				$(document).ready(function() {
					$(".tab1_btn").bind("click", function(){
						$(".tab1_btn").removeClass("tab_btn_selected");
						$(this).addClass("tab_btn_selected");
						$idx	= $(this).parent().index();
						$(".page_body").hide();
						$("#page_block_"+$idx).show();
					});
				});
			</script>
<jsp:include page="/common/jsp/adminFooter.jsp" flush="true"/>